<template>
  <div>
    <el-container>
      <el-header>积分商品种类管理</el-header>
      <el-main>

        <el-button type="primary" @click="dialogVisible = true">添加积分商品类别</el-button>

        <el-table :data="goodsTypes.records" style="width: 100%">
          <el-table-column prop="typeName" label="类别名" width="180">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="180" :formatter="formatterState">
          </el-table-column>
          <el-table-column prop="typeSelf" label="最小分类" width="180" :formatter="formattertypeSelf">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="scope">
              <el-button @click="changeStatus(scope.row)" type="text" size="small">修改状态</el-button>
              <el-button @click="changeFather(scope.row)" type="text" size="small">更换分类</el-button>
              <el-button @click="readyDelType(scope.row)" type="danger" size="small">删除该分类</el-button>
            </template>
          </el-table-column>
        </el-table>


      </el-main>
      <el-tree :data="bookTypeTree" show-checkbox node-key="typeId" :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]" :props="defaultProps">
      </el-tree>
      <el-dialog title="新增类别" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div>请选择新的类别</div>
        <el-select v-model="choosenTypeId" placeholder="请选择">
          <el-option :label="defaultOption.typeName" :value="defaultOption.typeId"></el-option>
          <el-option v-for="item in goodsTypes.records" :key="item.id" :label="item.typeName" :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="newTypeName" placeholder="请输入类别名" width="10"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addgoodsType()">立即添加</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="showDelWindow" width="30%" >
        <span>您确定要删除此类型吗? 确定后该类型下所有商品将被同时删除!!</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDelWindow = false">取 消</el-button>
          <el-button type="primary" @click="delType">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="更改类型" :visible.sync="showChangeFatherDilog" width="30%">
        <el-select v-model="choosenTypeId" placeholder="请选择">
          <el-option :label="defaultOption.typeName" :value="defaultOption.typeId"></el-option>
          <el-option v-for="item in useblegoodsTypes" :key="item.id" :label="item.typeName" :value="item.id">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showChangeFatherDilog = false">取 消</el-button>
          <el-button type="primary" @click="changeFatherNow()">确 定</el-button>
        </span>
      </el-dialog>

      <el-footer>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="goodsTypes.pageNum"
          :page-sizes="[3, 4, 5]" :page-size="goodsTypes.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="goodsTypes.total">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "pointGoodsTypeAdmin",
    data() {
      return {
        showDelWindow: false,
        selectRow: {},
        goodsTypes: {},
        pageNum: 0,
        pageSize: 0,
        userId: 0,
        choosenTypeId: 0,
        defaultOption: {
          typeId: 0,
          typeName: '一级目录'
        },
        dialogVisible: false,
        newTypeName: "",
        bookTypeTree: [],
        ListGoodsTypes:[],
        defaultProps: {
          children: 'bookTree',
          label: 'typeName'
        },
        showChangeFatherDilog: false,
        useblegoodsTypes: []
      }
    },
    methods: {
      delType(){
        this.showDelWindow = false
        this.$http.get("/pointsmall/goodsType/delType?typeId="+this.selectRow.id).then(resp=>{
          this.loadAllGoodsType(this.pageNum,this.pageSize)
          console.log(resp.data.data)
        })
      },
      readyDelType(row) {
        this.selectRow = row
        this.showDelWindow = true
      },

      findUseFulType(row) {
        let typeName = row.typeName
        let typeId = row.id
        let parentId = row.parentId
        this.$http.post("/pointsmall/goodsType/findUseFulType", {
          typeId: typeId,
          parentId: parentId,
          typeName: typeName
        }).then(resp => {
          console.log(resp.data)
          this.useblegoodsTypes = resp.data.data
        })
      },
      changeFatherNow() {
        let typeId = this.selectRow.id
        let newParentId = this.choosenTypeId
        let oldParentId = this.selectRow.parentId
        this.showChangeFatherDilog = false
        this.$http.post("/pointsmall/goodsType/changeFatherNow", {
          typeId: typeId,
          newParentId: newParentId,
          oldParentId: oldParentId
        }).then(resp => {
          console.log(resp.data)
          this.loadAllGoodsType(this.pageNum, this.pageSize)
        })
      },
      changeFather(row) {
        this.showChangeFatherDilog = true
        this.selectRow = row
        //点击后 查出所有当前可用的类型 1.不能是自己的儿子 2. 不能是当前的父类
        this.findUseFulType(row)

      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.loadAllGoodsType(this.pageNum, this.pageSize)
        console.log(`每页 ${pageSize} 条`);
      },
      handleCurrentChange(pageNum) {
        this.pageNum = pageNum;
        console.log("当前拿到的页数:" + this.pageNum)
        this.loadAllGoodsType(this.pageNum, this.pageSize)
        console.log(`当前页: ${pageNum}`);
      },
      changeStatus(row) {
        console.log(row)
        const newStatus = row.state == 0 ? 2 : 0
        const typeId = row.id
        this.$http.post("/pointsmall/goodsType/changeStatus.api", {
          state: newStatus,
          typeId: typeId,
        }).then(resp => {
          this.loadAllGoodsType(this.pageNum, this.pageSize)
        })
      },
      formattertypeSelf(row) {
        switch (row.typeSelf) {
          case 0:
            return '是';
          case 1:
            return '否';
          default:
            return '未知状态';
        }
      },
      formatterState(row) {
        switch (row.state) {
          case 0:
            return '可用';
          case 1:
            return '删除';
          case 2:
            return '禁用';
          default:
            return '未知状态';
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      addgoodsType() {
        this.dialogVisible = false
        // console.log(this.choosenTypeId)
        this.$http.post("/pointsmall/goodsType/addGoodsType.api", {
          parentId: this.choosenTypeId,
          typeName: this.newTypeName
        }).then(resp => {
          this.loadAllGoodsType(this.pageNum, this.pageSize)
        })
      },
      loadAllGoodsType(pageNum, pageSize) {
        this.$http.post("/pointsmall/goodsType/getAll", {
          pageNum: pageNum,
          pageSize: pageSize
        }).then(resp => {
          console.log(resp.data)
          this.goodsTypes = resp.data.data
        })
      },
      loadListGoodsType() {
        this.$http.get("/pointsmall/goodsType/getAllList").then(resp => {
          console.log(resp.data)
          this.ListGoodsTypes = resp.data.data
        })
      }
    },
    created() {
      this.loadAllGoodsType(this.pageNum, this.pageSize)
      this.loadListGoodsType()
      this.userId = localStorage.getItem("id")
    }
  }
</script>

<style>

</style>
